<template>
  <div class="content-box">
    <nav-title title="资格证书" />
    <div class="line">
      <span class="important">*</span>
      <div class="label">名称</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="name">
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">等级</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="level">
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">签发单位</div>
      <div class="value">
        <input type="text" placeholder="请在此输入" v-model="company">
      </div>
    </div>
    <div class="line">
      <span class="important">*</span>
      <div class="label">签发日期</div>
      <div class="value">
        <group>
          <datetime value-text-align="left" placeholder="请选择" v-model="qfDate"></datetime>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">有效期</div>
      <div class="value">
        <group>
          <datetime value-text-align="left" placeholder="请选择" v-model="validDate"></datetime>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">存档状态</div>
      <div class="value">
        <group label-width="5em">
          <popup-picker value-text-align="left" :data="statusList" placeholder="请选择" :columns=statusLength v-model="status" show-name></popup-picker>
        </group>
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">借用人</div>
      <div class="value">
        <input type="text" placeholder="请在此输入"  v-model="borrower">
      </div>
    </div>
    <div class="line">
      <span class="important"></span>
      <div class="label">归档时间</div>
      <div class="value">
        <group>
          <datetime value-text-align="left" placeholder="请选择" v-model="gdDate"></datetime>
        </group>
      </div>
    </div>
    <div class="submit-btn" @click="save">
      保存
    </div>
    <div class="remove-btn" @click="remove">
      删除
    </div>
  </div>
</template>

<script>
import { Datetime, Group, PopupPicker } from 'vux'
import { editpqual,delQualification,getDicItem,getTrsNum } from '../../../api/api'
import { json2Form } from '../../../util/http'

export default {

  name: 'input-information',
  components: {
    Datetime, Group, PopupPicker
  },
  mounted(){
    //获取字典
    this.getDic()
    this.getsss()
  },
  data() {
    return {
     name: '',
     level: '',
     company: '',
     qfDate: '',
     validDate: '',

     statusList: [],
     statusLength: 1,
     status: [],

     borrower: '',
     gdDate: '',

    }
  },
  methods: {
    getsss(){
      getTrsNum().then(res=>{
        console.log(res)
        this.cTransactionNbr = res.retData
      })
    },
    getDic(){
      //存档状态字典
      getDicItem({fileName: 'C_SAVE_STATUS'}).then(res=>{
        if(res && res.retCode === '000000'){
          for(let i=0; i<res.retData.length; i++){
            this.statusList.push({name: res.retData[i].xlatshortname,value: res.retData[i].fieldvalue});
          }
          this.statusLength = res.retData.length;
        }
      }).catch(res=>{

      });
    },
    save() {
      if(this.name === ''){
        this.$vux.alert.show({
          title: '警告',
          content: '请输入名称'
        });
        return;
      }

      if(this.qfDate === ''){
        this.$vux.alert.show({
          title: '警告',
          content: '请选择签发日期'
        });
        return;
      }
      let params = {
        'emplid': '10070226',
        'cSeqno': '260',
        'cModStauts':'C',
        'cName': this.name,
        'cLevel': this.level,
        'cCompany': this.company,
        'cDate': this.qfDate,
        'cDate1': this.validDate,
        'cSaveStatus': this.status[0],
        'cName1': this.borrower,
        'cDate2': this.gdDate,
        'cTransactionNbr': this.cTransactionNbr
      }

      console.log(params)
      editpqual(json2Form(params)).then(res => {
        const that = this;
        //成功：000000
        if(res && res.retCode === '000000' ){
          //保存成功
          this.$vux.alert.show({
            title: '新城',
            content: '保存成功',
            onHide () {
              that.$router.push('/');
            }
          })

        }else{
          // 显示
          this.$vux.alert.show({
            title: '',
            content: res.retMsg
          })
        }
      }).catch (res=>{
        this.$vux.alert.show({
          title: '警告',
          content: '网络异常，请稍后重试'
        })
      })
    },

  }
}
</script>
<style type="text/scss" lang="scss">
.content-box {
  padding: 0 10px;
  .important {
    width: 10px;
    color: red;
  }

  .line {
    display: flex;
    border-bottom: 1px solid #cccccc;
    line-height: 40px;
    .label {
      flex: 2;
      text-align: left;
      font-size: 14px;
    }
    .value {
      flex: 3;
      font-size: 13px;
      text-align: right;
      display: flex;
      justify-content: flex-start;
      color: #707070;
      input {
        width: 100%;
        padding-left: 15px;
      }
    }
    // .controls-box {
    //   flex: 3;
    //   text-align: left;
    //   .controls {
    //     display: inline;
    //   }
    // }
    .select-control {
      flex: 3;
      text-align: left;
    }
    .date-control {
      flex: 3;
      text-align: left;
    }
    // .select-box {
    //   text-align: left;
    //   .controls {
    //     display: inline;
    //   }
    // }
    // .icon {
    //   flex: 1;
    //   text-align: right;
    // }
  }

  .submit-btn {
    position: absolute;
    bottom: 35px;
    background-color: #07bc4b;
    color: white;
    font-size: 16px;
    font-weight: 900;
    line-height: 32px;
    width: 110px;
    height: 32px;
    // margin-left: -100px;
    left: 15%;
    box-shadow: 3px 3px 5px #888888;
  }

  .remove-btn {
    position: absolute;
    bottom: 35px;
    background-color: #ff6633;
    color: white;
    font-size: 16px;
    font-weight: 900;
    line-height: 32px;
    width: 110px;
    height: 32px;
    // margin-left: -100px;
    left: 55%;
    box-shadow: 3px 3px 5px #888888;
  }

  .title {
    font-size: 20px;
    font-weight: 900;
    color: #25262d;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
 {
  opacity: 0;
}
</style>

